<template>
  <el-dialog :visible.sync="dialogVisible" title="定位"  append-to-body width="28%">
    <div v-if="selectedResource">
      <!-- <p style="margin-bottom: 20px;"><strong>资源图片：</strong></p> -->
      <div class="image-list">
        <el-image
          v-for="(url, index) in selectedResource.imageUrlsPostion"
          :key="index"
          :src="url"
          :preview-src-list="selectedResource.imageUrlsPostion"
          fit="cover"
          style="width: 60vw; height: 27vh; border-radius: 6px; cursor: pointer;"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <!-- <p style="margin-top: 20px;font-weight: 500;"><strong>备注：</strong> {{ selectedResource.remark }}</p> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose" style="border-radius: 20px">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      selectedResource: null
    };
  },
  methods: {
    openDialog(resource) {
      this.selectedResource = resource;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  }
};
</script>
<style scoped>
.image-list {
  margin-top: -20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* margin-top: 10px; */
  
}

.el-dialog__wrapper {
    display: flex;
    padding: 24px;
    .el-dialog {
        margin: auto !important;
    }
}

.dialog-footer {
  text-align: right;
  padding-top: 30px;
}
</style>